<template>
   <div class="app-container">
      <el-row :gutter="20">
         <!--用户数据-->
         <el-col :span="24" :xs="24">
            <!-- <el-form :model="queryParams"  ref="queryRef" :inline="true" label-width="130px">
               <el-form-item label="知识产权成果类型" prop="propertyType">
                  <el-input
                     v-model="queryParams.propertyType"
                     placeholder="请输入类型"
                     clearable
                     size="small"
                     style="width: 240px"
                  />
               </el-form-item>
                <el-form-item  label="知识产权等级" prop="propertyLevel">
                 <el-select
                     placeholder="请选择论文级别"
                     v-model="queryParams.propertyLevel"
                     clearable
                     style="width: 260px"
                  >
                  <el-option
                  v-for="item in categoryOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                  >
                  </el-option>
                 </el-select>
          </el-form-item>

               <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery" size="mini">搜索</el-button>
                  <el-button icon="Refresh" @click="handleRef" size="mini">重置</el-button>
                  <el-button icon="Tickets" size="mini" @click="handleRef">参考</el-button>
               </el-form-item>
            </el-form> -->

            <el-row :gutter="10"  class="mb8" >
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                     icon="Plus"
                     size="mini"
                      @click="handleAdd"
                  >新增</el-button>
               </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="success"
                            plain
                            icon="Edit"
                            size="mini"
                            :disabled="single"
                            @click="handleUpdate"

                        >修改</el-button>
                    </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="danger"
                     plain
                     icon="Delete"
                     size="mini"
                     :disabled="single"
                     @click="handleDelete"
                  >删除</el-button>
               </el-col>
                <el-col :span="1.5">
                 <el-button icon="Refresh" size="mini" @click="getAll">重置</el-button>
               </el-col>
               <el-col :span="1.5">
               <el-button icon="Tickets" size="mini" @click="handleRef">参考</el-button></el-col>
            </el-row>
      
      <!-- 列表 -->
         <el-table v-loading="loading" :data="paperList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="50" align="center" />
       <el-table-column label="代码"  width="80" align="center" prop="code" />
         <el-table-column label="知识产权类型" align="center" prop="propertyType" />
         <el-table-column label="等级" align="center" prop="propertyLevel"  width="90" />
         <el-table-column label="工作量MAX" align="center" prop="workloadMax"  width="90" />
         <el-table-column label="工作量MIN" align="center" prop="workloadMin"  width="90" />
          <el-table-column label="备注" align="center" prop="remark"  width="100" />
          <el-table-column label="创建时间" align="center" prop="createdTime" width="160"/>
         <el-table-column label="更新时间" align="center" prop="updatedTime" width="160"/>
         <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template #default="scope" >
               <el-button
                  size="mini"
                  type="text"
                  icon="Edit"
                  @click="handleUpdate(scope.row)"
               >修改</el-button>
                 <el-button
                  size="mini"
                  v-if="scope.row.roleId !== 1"
                  type="text"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
               >删除</el-button>
            </template>
         </el-table-column>
      </el-table>
        <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="queryParams.pageNum"
               v-model:limit="queryParams.pageSize"
               @pagination="getList"
            />
        </el-col>
      </el-row>
<!-- 新增表单对话框 -->
<el-dialog :title="title" v-model="addopen" width="400px" append-to-body>
      <el-form ref="paperRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="分类代码" prop="code">
               <el-input  placeholder="请输入分类代码" v-model="form.code"/>
          </el-form-item>
          <el-form-item label="类型" prop="propertyType">
               <el-input  placeholder="请输入类型"  v-model="form.propertyType"/>
          </el-form-item>
         <el-form-item  label="等级" prop="propertyLevel">
                 <el-select 
                     placeholder="请选择论文级别"
                     v-model="form.propertyLevel"
                     clearable
                     style="width: 260px"
                  >
                  <el-option
                  v-for="item in categoryOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                  >
                  </el-option>
                 </el-select>
          </el-form-item>
                <el-form-item label="工作量Max" prop="workloadMax">
               <el-input-number  :min="0"
                                 placeholder="请输入工作量最大值" 
                                 controls-position="right"
                                 v-model="form.workloadMax"
                                 style="width: 260px"/>
          </el-form-item>
          <el-form-item label="工作量Min" prop="workloadMin">
               <el-input-number  :min="0"
                                 placeholder="请输入工作量最小值" 
                                 controls-position="right"
                                 v-model="form.workloadMin"
                                 style="width: 260px"/>
          </el-form-item>
          <el-form-item label="备注">
             <el-input
               v-model="form.remark"
               autosize
               type="textarea"
               placeholder="请输入备注"
            /> </el-form-item>

       </el-form>
       <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel" >取 消</el-button>
            </div>
         </template>
</el-dialog>

<!-- 参考表单 -->
<el-dialog :title="title" v-model="open" width="650px" append-to-body>
    <el-table :data="refData" border style="width: 100%">
            <el-table-column prop="number" label ="序 号" width="80" align="center"/>
            <el-table-column prop="paper" label ="论文、成果转化"  align="center" />
            <el-table-column prop="category" label="类别" width="100" align="center" />
            <el-table-column prop="workload" label="工作量" width="100" align="center" />
        </el-table>
</el-dialog>

   </div>
</template>

<script setup name="eduawardDict">
import { listAll , addDict , delDict,getDict,updateDict} from '@/api/nepu_dict/property'
const refData = [
   {
      number:'1',
      paper:'国外发明专利',
      category:'A',
      workload:'200'
   },
    {
      number:'2',
      paper:'国家发明专利、制定国家标准',
      category:'A',
      workload:'120'
   }
   ,
    {
      number:'3',
      paper:'制定行业标准',
      category:'A',
      workload:'100'
   },
    {
      number:'4',
      paper:'制定地方标准（省级）',
      category:'B',
      workload:'50'
   },
    {
      number:'5',
      paper:'实用新型、外观设计、国家软件登记',
      category:'B',
      workload:'30'
   },
]
const open = ref(false);
const title = ref("");
const loading = ref(true);  
const paperList = ref([]);
const total = ref(0);
const addopen = ref(false);
const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
const { proxy } = getCurrentInstance();
const categoryOptions = ref([
        {value: 'A1',label: 'A1'},
        {value: 'A2',label: 'A2'},
        {value: 'A3',label: 'A3'},
        {value: 'A4',label: 'A4'},
        {value: 'A5',label: 'A5'},
        {value: 'B1',label: 'B1'},
        {value: 'B2',label: 'B2'},
        {value: 'B3',label: 'B3'},
        {value: 'B4',label: 'B4'},
        {value: 'C1',label: 'C1'},
        {value: 'C2',label: 'C2'},
        ])
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    totalPages:undefined,
    propertyLevel:undefined,
    propertyType:undefined,
  },
   rules: {
    workloadMax: [
      { required: true, message: "不能为空", trigger: "blur" },
      { type: "number", min: 0,  message: "工作量不得小于0" },
    ],
    workloadMin: [
      { required: true, message: "不能为空", trigger: "blur" },
      { type: "number", min: 0,  message: "工作量不得小于0" },
    ],
    propertyType: [
      { required: true, message: "不能为空", trigger: "blur" },
      {
        min: 2,
        max: 50,
        message: "类型名称长度必须介于 2 和 50 之间",
        trigger: "change",
      },
    ],
    propertyLevel:[
       {required: true, message: "不能为空", trigger: "blur"}
     ],
    code:[
      {required: true, message: "不能为空", trigger: "blur" }
    ]
  },
});
const { queryParams, form,rules } = toRefs(data);


// 显示全部按钮
function getAll(){
  queryParams.value.thinktankLevel = undefined;
  queryParams.value.thinktankType = undefined;
  getList();
}
//新增
function handleAdd() {
    reset();
    addopen.value = true;
    title.value = "添加知识产权词典";
};
/** 确认新增操作 */
function submitForm() {
  proxy.$refs["paperRef"].validate(valid => {
    if (valid) {
        if (form.value.id != undefined) {
        console.log(form.value.id);
        updateDict(form.value).then(response => {
         console.log(form.value);
          proxy.$modal.msgSuccess("修改成功");
          addopen.value = false;
          getList();
        });
      }
       else{ addDict(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          addopen.value = false;
          getList();
          
        }); 
       }
    }
  });
}

// 查询列表
function getList(){
    loading.value = true;
    listAll(proxy.addDateRange(queryParams.value)).then(response =>{
    paperList.value = response.content;
    total.value = paperList.value.length;
    loading.value = false;
    })
}
//搜索按钮
function handleQuery(){
  queryParams.value.pageNum = 1;
  console.log(queryParams.value.workload);
  getList();
//   handleRef();搜索清理
}
//测试
function queryById(id){
  reset();
   const ID = id || ids.value;
   loading.value = true;
  getDict(ID).then(response => {
     console.log(response.data);
     reset2();
     console.log(paperList.value);
     queryParams.value.pageNum = 1;
     paperList.value = response.data;
     loading.value = false;
  });
}
/** 取消按钮操作 */
function cancel() {
  open.value = false;
  addopen.value = false;
  reset();
}
//删除按钮操作--------------------------------------------------- row  ids  
function handleDelete(row){
const  paperIds = row.id || ids.value;
proxy.$modal.confirm('是否确认删除成果词典ID为'+ paperIds +'的数据项').then(function(){
      return delDict(paperIds);
  }).then(()=>{
   getList();
   proxy.$modal.msgSuccess("删除成功");
  }).catch(()=>{})
}
/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const ID = row.id || ids.value;
    getDict(ID).then(response => {
    form.value = response;
    addopen.value = true;
    title.value = "修改";
  });
}
/** 参考表单 */
function handleRef(){
 title.value='参考'
 open.value = true
}
/** 重置form表单 */
function reset() {
  form.value = {
    workloadMin:0,
    propertyType: undefined,
    propertyLevel:undefined,
    workloadMax: 0,
   remark: undefined,
   code:undefined
   };
  proxy.resetForm("paperRef");
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 分类选择 */
function categorySelect(){
    if(form.value.propertyLevel === 'A1' || form.value.propertyLevel  === 'A2' ){  form.value.workload  = 120  }
    if(form.value.propertyLevel === 'A3'  ){form.value.workload = 100 }
   if(form.value.propertyLevel === 'B1' || form.value.propertyLevel  === 'B2' ){  form.value.workload  = 50  }
    
}


getList();
</script>

<style  scoped>

</style>
